<template>
  <div class="bigbox">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="主标题">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="副标题">
        <el-input v-model="form.funame"></el-input>
      </el-form-item>
      <el-form-item label="品牌图片">
        <el-upload
          class="avatar-uploader"
          action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers"
          name="good_pic"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="最低价">
        <el-input v-model="form.smallmoney"></el-input>
      </el-form-item>
      <el-form-item label="显示">
        <el-switch
          v-model="form.show"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.paixu"></el-input>
      </el-form-item>
      <el-form-item label="品牌描述">
        <quill-editor
          class="editor"
          ref="myTextEditor"
          v-model="form.content"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addFn">确认保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addTopic } from "../../request/httpApi";
export default {
  data() {
    return {
      form: {
        name: "", // 标题
        funame: "", // 副标题
        smallmoney: 0, // 最低价
        show: "", // 显示
        paixu: 0, // 排序
        content:'' // 富文本
      },
      imageUrl: "",
      headers: {
        "X-Nideshop-Token": localStorage.getItem("token"),
      },

      // 富文本
      content: null,

      contenttype: null,

      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            //                   [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进 // [{'direction': 'rtl'}],    // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            //                   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image", "video"], // 链接、图片、视频
          ], //工具菜单栏配置
        },

        placeholder: "请输入内容...", //提示

        readyOnly: false, //是否只读

        theme: "snow", //主题 snow/bubble

        syntax: true, //语法检测
      },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.imageUrl = file.response.data.fileUrl;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    addFn() {
      addTopic({
        title: this.form.name,
        subtitle: this.form.funame,
        price_info: this.form.smallmoney,
        scene_pic_url: this.imageUrl,
        sort_order: this.form.paixu,
        is_show: this.form.show.toString(),
        content:this.form.content
      }).then((res) => {
        console.log(res);
      });
    },
    // 富文本
    // 失去焦点

    onEditorBlur(editor) {}, // 获得焦点

    onEditorFocus(editor) {}, // 开始

    onEditorReady(editor) {}, // 值发生变化

    onEditorChange(editor) {
      this.content = editor.text;
    },
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor;
    },
  },
};
</script>

<style lang="less" scoped>
.bigbox {
  padding-top: 20px;
  padding-bottom: 160px;
  background-color: #fff;
  .el-input {
    width: 210px;
    margin-right: 15px;
    /deep/ .el-input__inner {
      height: 36px;
      line-height: 36px;
      border-radius: 5px;
    }
  }
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  /deep/ .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  // 富文本
  /deep/ .ql-editor {
    height: 600px;
  }
}
</style>
